<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('一览统计')" />
    <th:block th:include="include :: bootstrap-select-css"/>
    <th:block th:include="include :: select2-css"/>
    <th:block th:include="include :: datetimepicker-css" />
</head>
<body class="gray-bg">
     <div class="container-div">
        <div class="row">
        	<div class="col-sm-12 search-collapse">
				<form id="formId"  action="/blsj/report/yilan" method="post">
					<div class="select-list">
						<ul>
							<li>
								统计类别：<select name="params[tjlb]" th:with="type=${@dict.getType('blsj_tjlb')}">
									<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" th:field="${blsjBgsjzl.params[tjlb]}"></option>
								</select>
							</li>
							<li>
								事件分类：<select name="pType" th:with="type=${@dict.getType('blsj_sjfl')}">
									<option value="">所有</option>
									<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" th:field="${blsjBgsjzl.pType}"></option>
								</select>
							</li>
							<li>
								事件等级：<select name="sjdj" th:with="type=${@dict.getType('blsj_sjdj')}">
									<option value="">所有</option>
									<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" th:field="${blsjBgsjzl.sjdj}"></option>
								</select>
							</li>
							<li>
								风险程度：<select name="sjfxd" th:with="type=${@dict.getType('blsj_fxcd')}">
									<option value="">所有</option>
									<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" th:field="${blsjBgsjzl.sjfxd}"></option>
								</select>
							</li>
							<li>
								事件严重程度：<select name="sjyzcd" th:with="type=${@dict.getType('blsj_sjyzcd')}">
									<option value="">所有</option>
									<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" th:field="${blsjBgsjzl.sjyzcd}"></option>
								</select>
							</li>
							<li>
								事件状态：<select name="state" th:with="type=${@dict.getType('blsj_sjzt')}">
									<option value="">所有</option>
									<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" th:field="${blsjBgsjzl.state}"></option>
								</select>
							</li>
							<li class="select-time">
                                <label>统计年份： </label>
                                <input type="text" class="time-input" id="year" placeholder="开始时间" autocomplete="off" th:value="${blsjBgsjzl.params.year}"
                                       name="params[year]"/>
                            </li>
							<li>
								<select id="type" name="type" data-live-search="true" data-actions-box="true" data-select-all-text="全选" data-deselect-all-text="全不选" data-width="200px" class="form-control noselect2 selectpicker" data-none-selected-text="请选择事件类型" multiple th:with="type=${@dict.getType('blsj_sjlx')}">
									<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" 
									th:selected="${#arrays.contains(#strings.arraySplit(blsjBgsjzl.type,','),dict.dictValue.toString())}" ></option>
								</select>
								<!-- 参考文章 https://www.cnblogs.com/webSnow/p/17030157.html  -->
							</li>
							<li>
								<a class="btn btn-primary btn-rounded btn-sm" onclick="yilanreportsearch()"><i class="fa fa-search"></i>&nbsp;搜索</a>
							    <a class="btn btn-warning btn-rounded btn-sm" onclick="document.getElementById('formId').reset();$('#type').selectpicker('val', ''); "><i
                                        class="fa fa-refresh"></i>&nbsp;重置</a>
							</li>
						</ul>
					</div>
				</form>
			</div>
			
            <div class="col-sm-12 select-table table-striped">
            	<div style="text-align:center"><h1>[[${title}]]</h1></div>
				<table width="100%" class="table table-bordered table-hover">
					<thead><tr height="40px;"><th>序号</th><th>[[${headerName}]]</th><th>第1季度</th><th>第2季度</th><th>第3季度</th><th>第4季度</th><th>汇总</th></tr></thead>
					<tr height="40px;" th:each="obj,status : ${yiLanList}">
						<td th:text="${status.index+1}"></td>
						<td th:text="${obj.name}"></td>
						<td th:text="${obj.jd1}"></td>
						<td th:text="${obj.jd2}"></td>
						<td th:text="${obj.jd3}"></td>
						<td th:text="${obj.jd4}"></td>
						<td th:text="${obj.count}"></td>
					</tr>
				</table>
            </div>
            
            <div class="col-sm-12">
            	<div style="text-align:center"><h1>[[${title}]]</h1></div>
               <!--   <div class="btn-group flex-center mb6">
                     <span class="btn btn-primary line" onclick="swithEchart('line')">折线图</span>
                     <span class="btn btn-white bar" onclick="swithEchart('bar')">柱状图</span>
                 </div> -->
                 <div class="echarts" id="main"></div>
            </div>
            
            
        </div>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: bootstrap-select-js"/>
	<th:block th:include="include :: select2-js"/>
	<th:block th:include="include :: datetimepicker-js" />
	<th:block th:include="include :: echarts-js" />
    <script th:inline="javascript">
    
    layui.use('laydate', function(){
    	var laydate = layui.laydate;
    	laydate.render({ 
    		elem: '#year',
    		type: 'year'
        });
    });

	/**
	 * 搜索
	 */
	function yilanreportsearch() {
		document.getElementById("formId").submit();　
	}
	
	
	
	var chartDom = document.getElementById('main');
	var myChart = echarts.init(chartDom);
	var option;
	
	option = {
	  tooltip: {
	    trigger: 'axis'
	  },
	  legend: {
	    data: [[${listName}]]
	  },
	  grid: {
	    left: '3%',
	    right: '4%',
	    bottom: '3%',
	    containLabel: true
	  },
	  toolbox: {
	    feature: {
	      saveAsImage: {}
	    }
	  },
	  xAxis: {
	    type: 'category',
	    boundaryGap: false,
	    data: ['第1季度', '第2季度', '第3季度', '第4季度']
	  },
	  yAxis: {
	    type: 'value'
	  },
	  series: [
	    {
	      name: 'Email',
	      type: 'line',
	      stack: 'Total',
	      data: [120, 132, 101, 134, 90, 230, 210]
	    },
	    {
	      name: 'Union Ads',
	      type: 'line',
	      stack: 'Total',
	      data: [220, 182, 191, 234, 290, 330, 310]
	    },
	    {
	      name: 'Video Ads',
	      type: 'line',
	      stack: 'Total',
	      data: [150, 232, 201, 154, 190, 330, 410]
	    },
	    {
	      name: 'Direct',
	      type: 'line',
	      stack: 'Total',
	      data: [320, 332, 301, 334, 390, 330, 320]
	    },
	    {
	      name: 'Search Engine',
	      type: 'line',
	      stack: 'Total',
	      data: [820, 932, 901, 934, 1290, 1330, 1320]
	    },
	  ]
	};
	
	option && myChart.setOption(option);
	
       
    </script>
</body>
</html>